<template>
  <div>
    <div class="operator-area">
      <a-button type="primary" @click="handleAddRow">添加行</a-button>
      <a-button type="danger" @click="handleDelRow" ghost>删除行</a-button>
    </div>
    <div class="table-area">
      <a-row :gutter="8">
        <a-col :span="16">
          <a-table
            rowKey="id"
            bordered
            :key="tableSetting.key"
            :columns="tableColumns"
            :loading="tableSetting.loading"
            :customRow="customRow"
            :dataSource="tableDataSource"
            :pagination="pagination"
            :scroll="{ y: 600 }"
            :rowSelection="{
              selectedRowKeys: tableSetting.selectedRowKeys,
              onChange: onTabalRowChange
            }"
            @change="handleTableChange">
            <template v-for="(editColumn, index) in editColumns" 
              :slot="editColumn.value" slot-scope="text, record">
              <span :key="index">
                <!-- 可编辑input -->
                <template v-if="(
                    (editingRecord === record.id) && 
                    (editingColumn === editColumn.value) && 
                    ('input' === editColumn.type)
                  )">
                  <a-input 
                    v-focus
                    :value="text"
                    @blur="e => handleInputBlur(e.target.value, record, editColumn.value)"
                    @change="e => handleInputChange(e.target.value, record, editColumn.value)"
                  />
                </template>
                <!-- 可编辑select -->
                <template v-else-if="(
                    (editingRecord === record.id) && 
                    (editingColumn === editColumn.value) && 
                    ('select' === editColumn.type)
                  )">
                  <!-- 立项年度 -->
                  <template v-if="editColumn.value == 'lxnd'">
                    <year-select
                      v-focus
                      :defaultValue="text"
                      @blur="(value) => handleSelectBlur(value, record, editColumn.value)"
                      @change="(value) => handleSelectChange(value, record, editColumn.value)">
                    </year-select>
                  </template>
                </template>
                <!-- 默认内容 -->
                <div v-else
                  @click="handleClickChange(record, editColumn.value)">
                  <span v-if="editColumn.value == 'type'">
                    {{ record.typeText }}
                  </span>
                  <span v-else>
                    {{ text }}
                  </span>
                </div>
              </span>
            </template>
          </a-table>
        </a-col>
        <a-col :span="8">
          <a-card
            :bodyStyle="{ height: '550px', overflow: 'auto' }">
            <pre>{{ tableDataSource }}</pre>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { pagination } from "@/common/setting"

export default {
  name: "AddRowTable",
  components: {
  },
  data () {
    return {
      tableSetting: {
        key: +new Date(),
        loading: false,
        
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      pagination: pagination(),
      tableColumns: [
        {
          title: "项目名称",
          dataIndex: "name",
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目编码",
          dataIndex: "code",
          width: 250,
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目地址",
          dataIndex: "addr",
          width: 150,
          scopedSlots: { customRender: "addr" }
        },
        {
          title: "负责人",
          dataIndex: "fzUser",
          width: 150,
          scopedSlots: { customRender: "fzUser" }
        },
        {
          title: "立项年度",
          dataIndex: "lxnd",
          width: 150,
          scopedSlots: { customRender: "lxnd" }
        },
        {
          title: "建设性质",
          dataIndex: "jsxz",
          width: 100,
          customRender: (text, record, index) => {
            return record.jsxzText
          },
        }
      ],
      tableDataSource: [
        {
          id: 1,
          name: "建设项目1", 
          type: "3",
          typeText: "收费公路",
          code: "132664974474",
          addr: "北京市",
          addrVisible: false,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
        },
        {
          id: 2,
          name: "建设项目2", 
          type: "5",
          typeText: "民用机场",
          code: "132664978874",
          addr: "天津市",
          addrVisible: true,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
        }
      ],
      editColumns: [
        { value: "addr", type: "input" },
        { value: "fzUser", type: "input" },
        { value: "lxnd", type: "select" },
        { value: "type", type: "select" },
      ],
      editingColumn: "",
      editingRecord: ""
    }
  },
  methods: {
    // 行个性化配置
    customRow (record, index) {
      return {
        on: {
          click: (event) => {
          }
        }
      }
    },
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      console.log('selectedRowKeys onTabalRowChange: ', selectedRowKeys)
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 可编辑单元格点击
     */
    handleClickChange (record, column) {
      this.editingRecord = record.id
      this.editingColumn = column
    },
    /**
     * 表格中可编辑td中的input数据变化
     */
    handleInputChange (value, record, column) {
      const resData = [...this.tableDataSource]
      let target = resData.filter(item => {
        return item.id === record.id
      })[0]
      if (target) {
        target[column] = value
        this.tableDataSource = resData
      }
    },
    /**
     * 表格中可编辑td中的input失去焦点
     */
    handleInputBlur (value, record, column) {
      this.editingRecord = ""
      this.editingColumn = ""
    },
    /**
     * 表格中可编辑td中的select数据改变
     */
    handleSelectChange (value, record, column, label, labelColumn) {
      const resData = [...this.tableDataSource]
      let target = resData.filter(item => {
        return item.id === record.id
      })[0]
      if (target) {
        target[column] = value
        if (label) {
          target[labelColumn] = label[0]
        }
        this.tableDataSource = resData
      }
    },
    /**
     * 表格中可编辑td中的select失去焦点
     */
    handleSelectBlur (value, record, column) {
      this.editingRecord = ""
      this.editingColumn = ""
    },
    /**
     * 添加行数据
     */
    handleAddRow () {
      const { tableDataSource } = this
      let tableLength = tableDataSource.length
      let count = tableLength + 1
      let newData = {
        id: count,
        name: "建设项目" + count, 
        type: "5",
        typeText: "民用机场",
        code: "13266497887" + count,
        addr: "天津市",
        addrVisible: true,
        jsxz: 2,
        jsxzText: "改建",
        lxnd: "2020",
        fzUser: "李松",
        editVisible: false,
      }
      this.tableDataSource = [...tableDataSource, newData];
    },
    /**
     * 删除选中行
     */
    handleDelRow () {
      const _this = this
      const { selectedRowKeys } = _this.tableSetting
      if (selectedRowKeys && selectedRowKeys.length > 0) {
        this.$confirm({
          title: '提示',
          content: '是否要删除选中数据！',
          onOk() {
            let resData = [..._this.tableDataSource]
            selectedRowKeys.forEach(element => {
              resData = resData.filter(item => item.id !== element)
            })
            _this.tableDataSource = resData
          },
          onCancel() {},
        });
      } else {
        this.$success({
          title: '提示',
          content: "请选择需要删除的行！",
          okText: "确定"
        });
      }
    },
    /** 表格数据变化 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
  }
}
</script>

<style lang="less">
</style>
